{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/order.css">
<body>
<div class="build-navbar" data-title="确认订单" data-color="#fff" data-lcolor="#fff" data-transparent></div>
<div class="main m-30">
    <img src="/static/index/images/bg/bg_qrddtopbj@2x.png" alt="" class="img-top"/>

    <div class="card address flex items-center justify-between" data-key="address"
         data-url="{:url('address/index')}?type=choose" lay-event="openFrame">
        {if $temporary.address}
        <div>
            <div class="top flex items-center justify-start">
                <img src="/static/index/images/order/ic_qrdddiz@2x.png" alt="" class="icon">
                <span class="name">{$temporary.address.nickname}</span><span class="tel">{$temporary.address.tel}</span>
            </div>
            <div class="bottom line-2">
                {$temporary.address.p.title}{$temporary.address.c.title}{$temporary.address.d.title}{$temporary.address.t.title}{$temporary.address.details}
            </div>
        </div>

        {else}
        <div class="choose">
            请选择收货地址
        </div>
        {/if}
        <div class="more"><i class="layui-icon layui-icon-right"></i></div>
    </div>

    <div class="card pro-container mt-30 p-30">
        {foreach name="temporary.product" item="product"}
        <div class="pro-item flex items-start justify-between py-30">
            <img src="{$product.icon}" alt="{$product.title}" class="icon"/>
            <div class="major flex items-start flex-col flex-1">
                <div class="pro-title line-2">{$product.title}</div>
                <div class="spec line-2">{$product.spec}</div>
            </div>
            <div class="fund flex items-end flex-col">
                <div class="price front">{$product.vip_price}</div>
                <div class="num">x{$product.num}</div>
            </div>
        </div>
        {/foreach}

        <div class="layout-lr">
            <div class="item flex items-center justify-between pt-30">
                <div class="item-title">订单运费</div>
                <div class="value {if $temporary.freightTotal > 0}front{/if}">
                    {$temporary.freightTotal > 0 ? $temporary.freightTotal : '包邮'}
                </div>
            </div>
            <div class="item flex items-center justify-between pt-30">
                <div class="item-title">商品总额</div>
                <div class="value front bdc">
                    {$temporary.realTotal - $temporary.freightTotal}
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-30 p-30 mb-big-2">
        <div class="layout-lr">
            <div class="item flex items-center justify-between">
                <div class="title">订单备注</div>
                <div class="value flex-1">
                    <input class="item-inp remark" type="text" placeholder="订单备注，选填" autocomplete="off"/>
                </div>
            </div>
        </div>
    </div>

    <div class="order-footer flex items-center justify-between">
        <div class="total-container">
            <div class="front-text total">￥{$temporary.realTotal}</div>
            <div class="other">(含运费：<span class="val">￥24.00</span>)</div>
        </div>
        <div class="sm-btn" lay-click="submit">提交订单</div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['methods', 'listen'], function () {
        var l = layui.listen, a = layui.jquery, m = layui.methods, ly = layui.layer;
        l.eventCallback('openFrame', function (key, body) {
            a(body).find('.address-item').click(function () {
                m.fetchPostThrottle('{:url("address/choice")}', {id: a(this).attr('data-id')})
            });
        })
        m.event.click('submit', function () {
            var address_id = '{$temporary.address ? $temporary.address.id:""}',
                remark = a('.remark').val();
            if (!address_id) {
                ly.msg('请选择收货地址');
                return false;
            }
            return m.fetchPostThrottle('{:url("order/submit")}', {address_id: address_id, remark: remark});
        });
    });
</script>
</html>